<template>
  <div class="maincss">
    <el-card class="card-head">
      <div class="cell-title">文件名称</div>
      <div class="cell-btn">
        <el-button round @click="onSubmit">编辑</el-button>
        <el-button round>刷新</el-button>
      </div>
    </el-card>
    <el-row :gutter="20" class="mt-20">
      <el-col :span="18" :xs="24" class="">
        <div class="maincss ">
          <el-row>
            <el-card>
              <el-card class="gray-card no-border no-margin-top" shadow="never">
                <div class="cell-title">基础信息</div>
                <el-form ref="form" :model="form" class="form">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="质控文件名称：">
                        <el-input v-model="form.fileName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="当前版本号：">
                        <el-input v-model="form.version"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="所属项目：">
                        <el-input v-model="form.projectId"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="质控文件类型：">
                        <el-input v-model="form.fileType"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="创建人：">
                        <el-input v-model="form.creater"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="发布日期：">
                        <el-input v-model="form.publishTime"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-form-item label="内容描述：">
                      <el-input v-model="form.publishTime"></el-input>
                    </el-form-item>
                  </el-row>

                  <el-form-item label="附件上传">
                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                    >
                      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-form>
              </el-card>
              <el-card class="gray-card no-border no-margin-top" shadow="never">
                <div class="cell-title">历史版本</div>
                <el-table
                  v-loading="loading"
                  :data="checkList"
                  style="width: 100%;"
                >
                  <el-table-column
                    label="版本号"
                    align="center"
                    prop="checkNo"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="上传时间"
                    align="center"
                    prop="name"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="上传人"
                    align="center"
                    prop="checkName"
                  />
                  <el-table-column
                    label="上传文件"
                    align="center"
                    prop="checkTime"
                    :show-overflow-tooltip="true"
                  />
                </el-table>
              </el-card>

              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="pageNum"
                :limit.sync="pageSize"
              />
            </el-card>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getQualityFiles,
  updateQualityFiles
} from "@/api/business/qualityFiles";

export default {
  name: "quality-detail",
  components: {
    getQualityFiles,
    updateQualityFiles
  },
  props: {},
  data() {
    return {
      loading: false,
      checkList: [],
      total: 1,
      pageNum: 1,
      pageSize: 20,
      form: {
        id: 1,
        fileName: "",
        fileType: "",
        projectId: "",
        creater: "",
        publishTime: null,
        description: "",
        version: ""
      }
    };
  },
  created() {
    this.handleQualityFiles();
  },
  methods: {
    onSubmit() {
      updateQualityFiles(this.form).then(res => {
        this.msgSuccess("修改成功");
        this.handleClose();
      });
    },
    handleData(obj) {
      this.form.id = obj.id;
      this.form.fileName = obj.fileName;
      this.form.fileType = obj.fileType;
      this.form.projectId = obj.projectId;
      this.form.creater = obj.creater;
      this.form.publishTime = obj.publishTime;
      this.form.description = obj.description;
      this.form.version = obj.version;
    },
    handleQualityFiles() {
      getQualityFiles(this.form.id).then(res => {
        if (res) {
          this.prjectList = res;
        }
      });
    },
    handleAvatarSuccess() {},
    beforeAvatarUpload() {},
    toBack() {
      this.$emit("func", false);
    },
    handleClose() {
      this.form.id = null;
      this.form.fileName = "";
      this.form.fileType = "";
      this.form.projectId = "";
      this.form.creater = "";
      this.form.publishTime = undefined;
      this.form.description = "";
      this.form.version = "";
      this.$emit("handleCloseDetail");
    }
  }
};
</script>

<style scoped>
.tab-box tr {
  height: 50px;
}

.tab-box tr td {
  height: 50px;
}
</style>
